<template>
	<view class="page">
		<view class="head">
			<view class="head-box">
				<view class="head-one">
					<view class="head-one-friend">直属</view>
					<view class="head-one-friend">伙伴</view>
				</view>
				<view class="head-line"></view>
				
				<view style='disp: flex;justify-content: colunm;width: 50%;' >
					<view class="head-two" v-for="(item,index) in team.level_info" :key='index'>
						<view class="head-two-people"><view>{{item.name}}</view><view>{{item.sum}}</view></view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="choose">
			<view @tap="choosetype(1)">全部<view :class="active == 1 ?'active':''"></view></view>
			<view @tap="choosetype(2)">收益<text style="font-size: 20rpx;color: #999999;">▼</text><view :class="active == 2 ?'active':''"></view></view>
			<view @tap="choosetype(3)">设备<text style="font-size: 20rpx;color: #999999;">▼</text><view :class="active == 3 ?'active':''"></view></view>
			<view @tap="choosetype(4)">级别<text style="font-size: 20rpx;color: #999999;">▼</text><view :class="active == 4 ?'active':''"></view></view>
			<view @tap="choosetype(5)">筛选<text style="font-size: 20rpx;color: #999999;">▼</text><view :class="active == 5 ?'active':''"></view></view>
		</view>
		
		<view class="boxType" v-if="showType"  @tap="conealType"></view>
		
		<view class="modal-type" v-if="showType">
			<view class="choose-type"  v-if="active==5">
				
				<view class="title" style="font-weight: bold;margin: 20rpx 0;">
					收益
				</view>
				<view class="content">
					<view :class="money==1? 'active': ''" @tap="queryMoney(1)">总收益由低到高</view>
					<view :class="money==2? 'active': ''" @tap="queryMoney(2)">总收益由高到低</view>
					<view :class="money==3? 'active': ''" @tap="queryMoney(3)">昨日收益由低到高</view>
					<view :class="money==4? 'active': ''" @tap="queryMoney(4)">昨日收益由高到低</view>
				</view>
				<view class="title" style="font-weight: bold;margin: 20rpx 0;">
					设备
				</view>
				<view class="content">
					<view :class="equ==1? 'active': ''" @tap="queryEqu(1)">数量由高到低</view>
					<view :class="equ==2? 'active': ''" @tap="queryEqu(2)">数量由低到高</view>
				</view>
				<view class="title" style="font-weight: bold;margin: 20rpx 0;">
					级别
				</view>
				<view class="content" >
					<view v-for="(item,index) in levelName" :key='index' :class="level==item.level_id? 'active': ''" @tap="querylevel(item.level_id)">{{item.name}}</view>
				</view>
				<view class="btn-group" style="margin-top: 40rpx;">
					<view class="coneal" @tap="conealType">取消</view>
					<view class="submit" @tap="comfimType">确认</view>
				</view>
			</view>
			<view class="all"  v-if="active==4">
				<view class="line"></view>
				<view :class="orderlevel == 1? 'active':'title'" @tap="chooseOrderlevel(1)">级别由高到低</view>
				<view class="line"></view>
				<view :class="orderlevel == 2? 'active':'title'" @tap="chooseOrderlevel(2)">级别由低到高</view>
				<view class="line"></view>
			</view>
			<view class="all"  v-if="active==3">
				<view class="line"></view>
				<view :class="orderEqu == 1? 'active':'title'" @tap="chooseOrderEqu(1)">设备数最高</view>
				<view class="line"></view>
				<view :class="orderEqu == 2? 'active':'title'" @tap="chooseOrderEqu(2)">设备数最低</view>
				<view class="line"></view>
			</view>
			<view class="all" v-if="active==2">
				<view class="line"></view>
				<view :class="orderMoney == 1? 'active':'title'" @tap="chooseOrderMoney(1)">总收益最低</view>
				<view class="line"></view>
				<view :class="orderMoney == 2? 'active':'title'" @tap="chooseOrderMoney(2)">总收益最高</view>
				<view class="line"></view>
				<view :class="orderMoney == 3? 'active':'title'" @tap="chooseOrderMoney(3)">昨日收益最低</view>
				<view class="line"></view>
				<view :class="orderMoney == 4? 'active':'title'" @tap="chooseOrderMoney(4)">昨日收益最高</view>
				<view class="line"></view>
			</view>
			
		</view>
		
		<view class="team" v-for="(item,index) in list" :key='index'>
			<view class="team-head">
				<view><image :src="item.headimg" mode="" style="border-radius: 100rpx;"></image></view>
				<view class="team-name" style="font-size: 26rpx;">
					<view style="width: 80rpx;">{{item.name}}</view>
					<view style="color: #ff743a;margin-left: 20rpx;">{{item.levelName}}</view>
					<view style="font-size: 26rpx;margin-left: 40rpx;">{{item.phone}}</view>
				</view>	
			</view>
			<view class="team-line"></view>
			<view class="content1">
				<view>设备量: <text style="margin: 0 10rpx;">{{item.count}}</text> 个</view>
				<view>昨日设备收入: {{item.profit}}</view>
			</view>
			<view class="content2">
				<view>总收益:<text style="margin: 0 10rpx;color: #008cbc;">{{item.total}}</text>元</view>
				<view>昨日分润收益: {{item.friend}}</view>
			</view>
			<view class="marny-box">
				<view class="marny-box-one">
					<view style="font-size: 22rpx;margin: 10rpx 0;">在线设备</view>
					<view style="color: #1FD188">{{item.zaixian}}</view>
				</view>
				<view class="marny-box-one">
					<view style="font-size: 22rpx;margin: 10rpx 0;">离线设备</view>
					<view style="color: #ff0000">{{item.lixian}}</view>
				</view>
				<view class="marny-box-one">
					<view style="font-size: 22rpx;margin: 10rpx 0;">异常设备</view>
					<view style="color: #ff0000">{{item.yichang}}</view>
				</view>
			</view>
			<!-- <view style="text-align: center;font-size: 22rpx; margin-top: 10rpx;">
				收起
			</view> -->
		</view>
		
	</view>
</template>

<script>
	let App = getApp();
	export default {
		data() {
			return {
				active:1,
				showType:false,
				level:-1,
				money:0,
				equ:0,
				orderlevel:0,
				orderEqu:0,
				orderMoney:0,
				team:{
					'level_info':[
							{
								'name':'级别获取中',
							},
						],
					},
				page:1,
				list:[],
				levelName:[]
			}
		},
		onLoad() {
			this.getTeamInfo();
			this.getLevelName();
		},
		methods: {
			getTeamInfo(){
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getTeamInfo')({
					'id':userinfo.id
				}).then(res=>{
					if(res.code == 200){
						this.team = res.data
						this.list = res.data.list 
					}
					uni.hideLoading()
				})
			},
			getLevelName(){

				this.$api.interfaceApi('getLevelName')({
					'sys':App.globalData.sys
				}).then(res=>{
					if(res.code == 200){
						this.levelName = res.data
					}
				})
			},
			choosetype(index){
				if(index == 1){
					this.showType = false
					this.active = index
					return;
				}
				this.showType = true
				this.active = index
			},
			conealType(){
				this.showType = false
			},
			//查找
			comfimType(){
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				let Object = {
					'id':userinfo.id
				}
				
				if(this.active == 1){
					
				}else if(this.active == 4){
					Object.orderlevel = this.orderlevel
				}else if(this.active == 3){
					Object.orderEqu = this.orderEqu
				}else if(this.active == 2){
					Object.orderMoney = this.orderMoney
				}else if(this.active == 5){
					Object.money=this.money
					Object.equ=this.equ
					Object.level=this.level
				}
				
				this.$api.interfaceApi('getTeamInfo')(Object).then(res=>{
					this.team = res.data
					this.showType = false
					uni.hideLoading()
				})
			},
			
			querylevel(index){
				this.level = index
			},
			queryMoney(index){
				this.money = index
			},
			queryEqu(index){
				this.equ = index
			},
			chooseOrderlevel(index){
				if(this.orderlevel == index){
					this.order = ''
				}else{
					this.orderlevel = index
				}
				this.comfimType()
			},
			chooseOrderEqu(index){
				
				if(this.orderEqu == index){
					this.order = ''
				}else{
					this.orderEqu = index
				}
				this.comfimType()
			},
			chooseOrderMoney(index){
				
				if(this.orderMoney == index){
					this.order = ''
				}else{
					this.orderMoney = index
				}
				this.comfimType()
			},
			onReachBottom() {
				this.page = this.page+1;
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('loadPage')({
					'id':userinfo.id,
					'page':this.page
				}).then(res=>{
					uni.hideLoading()
					this.page = res.data.page*1
					this.list = this.list.concat(res.data.list);
					console.log(this.list)
				})
			},
		}
	}
</script>

<style lang="less">
	.page{
		.head{
			background-color: #008cbc;
			height: 300rpx;
			width: 100%;
			padding: 30rpx 10rpx;
			box-sizing: border-box;
			
			.team-fei{
				border-top: 1rpx solid #FFFFFF;
				padding-top: 20rpx;
				color:#FFFFFF;
				text-align: center;
			}
			
			.head-box{
				display: flex;
				justify-content: space-between;
				width: 100%;
				.head-one{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					width: 50%;
					color:#FFFFFF;
					text-align: center;
					box-sizing: border-box;
					padding: 40rpx;
					
					.head-one-people{
						text-align: center;
						display: flex;
						font-weight: bold;
						font-size: 30rpx;
						justify-content: space-between;
					}
					.head-one-friend{
						text-align: center;
						font-weight: bold;
						font-size: 30rpx;
					}
					
					
				}
				
				.head-two{
					color:#FFFFFF;
					box-sizing: border-box;
					text-align: center;
					padding: 0rpx 40rpx;
					
					.head-two-people{
						text-align: center;
						display: flex;
						font-weight: bold;
						font-size: 30rpx;
						justify-content: space-between;
					}
				}
				
				
				.head-line{
					border: 1rpx solid #FFFFFF;
					height: 180rpx;
					margin: 20rpx 20rpx;
					background-color: #FFFFFF;
					opacity: 0.5;
				}
			}
		}
		
		.choose{
			padding: 10rpx 50rpx;
			display: flex;
			justify-content: space-between;
			.active{
				width: 50%;
				margin: 0 20%;
				box-sizing: border-box;
				border: 2rpx solid #ff743a;
				background-color: #ff743a;
			}
		}
		.boxType{
			position: fixed;
			top: 32%;
			left: 0;
			width: 100%;
			height: 100%;
			background-color:#000000;
			opacity: 0.5;
			z-index: 99;
		}
		.modal-type{
			background-color: #FFFFFF;
			width: 100%;
			height: 800rpx;
			position: absolute;
			top: 32%;
			left: 0%;
			z-index: 100;
			box-sizing: border-box;
			
			.choose-type{
				padding: 10rpx 50rpx;
				box-sizing: border-box;
				.content{
					
					view{
						display: inline-block;
						margin-left: 40rpx;
						//margin-right: 20rpx;
						margin-top: 10rpx;
						text-align: center;
						border-radius: 10rpx;
						width: 40%;
						height: 50rpx;
						font-size: 24rpx;
						color: #999999;
						line-height: 49rpx;
						background-color: #f3f3f3;
					}
					
					.active{
						color: #FFFFFF;
						background-color: #008cbc;
					}
				}
				.content1{
					
					view{
						display: inline-block;
						margin-left: 40rpx;
						//margin-right: 20rpx;
						margin-top: 10rpx;
						text-align: center;
						border-radius: 10rpx;
						width: 30%;
						height: 60rpx;
						font-size: 24rpx;
						color: #999999;
						line-height: 59rpx;
						background-color: #f3f3f3;
					}
					
					.active{
						color: #FFFFFF;
						background-color: #008cbc;
					}
				}
			}
			.all{
				padding:100rpx 50rpx;
				font-size: 32rpx;
				box-sizing: border-box;
				.title{
					padding: 20rpx 0;
				}
				.active{
					color:#FFFFFF;
					background-color: #008cbc;
					padding: 20rpx 0;
				}
				.line{
					border: 2rpx solid #dddddd;
					background-color: #dddddd;
				}
			}
			.btn-group{
				display: flex;
				padding: 0 20rpx;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 10rpx;
				.coneal{
					background-color: #e1e1e1;
					border-radius: 15rpx;
					width: 40%;
					text-align: center;
				}
				.submit{
					background-color: #ff743a;
					color: #FFFFFF;
					border-radius: 15rpx;
					width: 40%;
					text-align: center;
				}
			}
			
		}
		.team{
			margin: 40rpx auto;
			border-radius: 20rpx;
			width: 90%;
			height: 450rpx;
			background-color: #FFFFFF;
			padding: 20rpx 20rpx 50rpx 20rpx;
			box-sizing: border-box;
			overflow:hidden;
			.team-line{
				border-bottom: 1rpx solid #eaeaea;
				margin-top: 10rpx;
			}
			.team-head{
				display: flex;
				image{
					width: 100rpx;
					height: 100rpx;
				}
				.team-name{
					width: 90%;
					display: flex;
					justify-content: space-between;
					line-height: 100rpx;
					margin-left: 20rpx;
					view{
						width: 33%;
					}
				}
				.team-status{
					margin-left: 80rpx;
					line-height: 100rpx;
				}
			}
			.cri{
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				border: 2rpx solid;
				margin-left: 95%;
			}
			.title{
				display: flex;
				justify-content: space-between;
			}
			.content1{
				display: flex;
				margin-top: 20rpx;
				justify-content: space-between;
				font-size: 30rpx;
				view{
					width: 50%;
				}
			}
			.content2{
				display: flex;
				margin-top: 20rpx;
				justify-content: space-between;
				font-size: 30rpx;
				view{
					width: 50%;
				}
			}
			
			.marny-box{
				background-color: #f4f4f4;
				padding: 10rpx 50rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				.marny-box-one{
					text-align: center;
				}
			}
		}
	}
</style>
